<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/goods' }">首页</el-breadcrumb-item>
		  	<el-breadcrumb-item>添加商品</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form ref="form" :model="goods" label-width="80px">
		  	<el-form-item label="商品名称">
		    	<el-input v-model="goods.title"></el-input>
		  	</el-form-item>

		  	<el-form-item label="商品价格">
		    	<el-input v-model="goods.price"></el-input>
		  	</el-form-item>

		  	<el-form-item label="商品库存">
		    	<el-input v-model="goods.stock"></el-input>
		  	</el-form-item>

		  	<el-form-item label="商品主图">
				<el-upload
				  class="upload-demo"
				  action="/api/goods/upload"
				  :on-preview="handlePreview"
				  :on-remove="handleRemove"
				  :file-list="goods.detailPic"
				  :on-success="successEvent"
				  list-type="picture">
				  <el-button size="small" type="primary">点击上传</el-button>
				  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
				</el-upload>
		  	</el-form-item>

		  	<el-form-item label="定时上架">
		    	<el-date-picker
			      	v-model="goods.date"
			      	type="datetime"
			      	placeholder="选择日期时间">
			    </el-date-picker>
		  	</el-form-item>

		  	<!-- <el-form-item label="商品类目">
			    <el-select v-model="goods.cateid" placeholder="请选择活动区域">
			      	<el-option label="区域一" value="shanghai"></el-option>
			      	<el-option label="区域二" value="beijing"></el-option>
			    </el-select>
		  	</el-form-item> -->

		  	<el-form-item label="商品属性">
			    <el-button v-for="item in cateList" :key="item.id" type="danger" @click="selectAttr(item.id)">{{ item.cate_name }}</el-button>
			</el-form-item>

		  	<!-- <el-form-item label="商品颜色">
			    <el-select v-model="goods.attrColor" placeholder="请选择活动区域">
			      	<el-option label="区域一" value="shanghai"></el-option>
			      	<el-option label="区域二" value="beijing"></el-option>
			    </el-select>
		  	</el-form-item> -->

		  	<!-- <el-form-item label="商品尺寸">
			    <el-slider
			      	v-model="goods.attrSize"
			      	:max="max"
			      	show-input>
			    </el-slider>
		  	</el-form-item> -->
		  
		  	<el-form-item label="是否上架">
		    	<el-switch v-model="goods.status"></el-switch>
		  	</el-form-item>

			<el-form-item label="是否预定">
		    	<el-switch v-model="goods.status"></el-switch>
		  	</el-form-item>

			<!-- <el-form-item label="净度">
			    <el-radio-group v-model="goods.attrPurity">
			      	<el-radio label="线上品牌商赞助"></el-radio>
			      	<el-radio label="线下场地免费"></el-radio>
			    </el-radio-group>
			</el-form-item> -->

			<el-form-item label="详情内容">
		    	<!-- <el-input type="textarea" v-model="goods.detailText"></el-input> -->
		    	<div id="websiteEditorElem"></div>
		  	</el-form-item>

		  	<el-form-item>
		    	<el-button type="primary" @click="editGood">上传商品</el-button>
		    	<el-button>取消</el-button>
		  	</el-form-item>
		</el-form>

		<el-dialog
		  	title="选择属性"
		  	:visible.sync="dialogVisible"
		  	width="30%"
		  	:before-close="handleClose">
		  	<el-transfer
		  		filterable
		  		:titles="['属性列表', '已赋属性']"
		    	:filter-method="filterMethod"
		    	filter-placeholder="请输入属性关键词"
		    	v-model="selectAttrList"
		    	:data="attrList">
		  	</el-transfer>
		  	<span slot="footer" class="dialog-footer">
		    	<el-button @click="dialogVisible = false">取 消</el-button>
		    	<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		  	</span>
		</el-dialog>
		
	</div>
</template>

<script type="text/javascript">
	import E from 'wangeditor'
	import 'wangeditor/release/wangEditor.min.css'
	export default{
		data(){
			return{
				max:20,
				goods:{
					id:"",
					title:"",
					status:true,
					detailText:"",
					detailPic:[],
					price:0,
					stock:0,
					headPic:[],
					_token:"",
					selectAttrList:[],
					date:""
				},
				cateList:[],
				attrList:[{label: "aa", key: 0},{label: "www", key: 1}],
				dialogVisible:false,
				selectAttrList:[],
				phoneEditor:null
			}
		},
		mounted () {
	      	this.phoneEditor = new E('#websiteEditorElem')
	      	this.phoneEditor.onchange = function () {
	        	this.goods.detailText = this.$txt.html()
	      	}
	      	this.phoneEditor.create()
	    },
		created(){
			this.goods._token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
			this.getCates();
			this.getGood();
		},
		methods:{
			getGood(){
				axios.get('/api/goods/item/'+this.$route.params.id)
					.then(res => {
						var data = res.data.result;
						this.goods.id = data.id;
						this.goods.title = data.title;
						this.goods.status = data.status == 1 ? false : true;
						this.goods.detailText = data.detail_text;
						var temp = JSON.parse(data.pic);
						for(var index in temp){
							this.goods.detailPic.push({
								name:temp[index],
								url:temp[index]
							});
						}
						this.phoneEditor.txt.html(data.detail_text);
						console.log(this.phoneEditor,"富文本");
						//this.goods.detailPic = JSON.parse(data.pic)[0];
					})
					.catch(error => {

					})
				
			},
			getCates()
			{
				axios.get('/api/cates')
					.then(result => {
						this.cateList = result.data.result;
					})
			},
			editGood(){
				if(this.goods.selectAttrList.length >= 1){
					for(var i=0;i<this.selectAttrList.length;i++){
						this.goods.selectAttrList.push(JSON.parse(this.selectAttrList[i]));
					}
				}
				axios.post('/api/good/edit',this.goods)
					.then(result => {
						this.goods.selectAttrList = [];
					})
					.catch(error => {

					})
			},
			selectAttr(id){
				this.dialogVisible = true;
				axios.get('/api/attrs?id='+id)
					.then(result => {
						this.attrList = this.handleAttrData(result.data.result);
					})
			},
			handleAttrData(data){
				var temp = [];
				for(var i=0;i<data.length;i++){
					temp.push({label:data[i].attr_name, key:'{"attr_id":'+data[i].id+',"cate_id":'+data[i].cate_id+'}'});
				}
				return temp
			},
			handleRemove(file, fileList) {
		        console.log(file, fileList);
		    },
		    handlePreview(file) {
		        console.log(this.goods.detailPic);
		   	},
		    handlePictureCardPreview(file){
		        this.dialogImageUrl = file.url;
		        this.dialogVisible = true;
		    },
		    handleExceed(files, fileList) {
	        	this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
	      	},
		    beforeRemove(file, fileList) {
		        return this.$confirm(`确定移除 ${ file.name }？`);
		    },
		    successEvent(file){
		    	this.goods.headPic.push(file.result);
		    	this.goods.detailPic.push({name:file.result,url:file.result});
		    },
		    handleClose(obj){
		    	console.log(obj);
		    },
		    filterMethod(query,item){
		    	return item;
		    }
		}
	}
</script>

<style type="text/css">
	input[type=file] {
	    display: none;
	}
</style>